<template>
  <div :class="['timeline-container', { 'is-horizontal': direction === 'horizontal' }]">
    <div v-for="(item, index) in items" :key="index" :class="['timeline-item', { 'has-next': index !== items.length }]">
      <div class="timeline-node-panel padding-tb-xs solid lines boottom-grey">
        <div class="timeline-node" :style="{ backgroundColor: item.color || defaultColor }"></div>
        <span class="margin-left-xs">{{`${item.title}`}}</span>
      </div>
      <div class="timeline-content" v-if="item.timestamp||item.acter||item.content ">
        <div class="timeline-timestamp" v-if="item.timestamp">{{ item.timestamp }}</div>
        <div class="timeline-text" v-if="item.acter">{{ item.acter }}</div>
        <div class="timeline-text" v-if="isShowContent&&item.content">{{ item.content }}</div>
      </div>
      <div class="timeline-content-no" v-else>
        <div class="timeline-text">暂无信息</div>
      </div>
      <!-- Only show arrow if it's not the last item -->
      <div v-if="index !== items.length-1" class="timeline-arrow"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { AppStore } from '@/stores/store';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  direction: {
    type: String,
    default: 'horizontal', // 可选值: 'horizontal' 或 'vertical'
  },
  defaultColor: {
    type: String,
    default: '#ccc', // 默认节点颜色
  },
  isShowContent: {
    type: Boolean,
    default: true, // 是否显示内容
  }
});
</script>

<style lang="scss" scoped>
.timeline-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 自动换行 */
  gap: 40px; /* 项目之间的间距 */
}

.timeline-container.is-horizontal .timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 200px; /* 控制每个时间轴项的宽度 */

  border: 1px solid #ccc; /* 内容边框 */
  border-radius: 4px; /* 圆角 */
  background-color: #fff; /* 背景色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.timeline-item .timeline-node {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  //margin-bottom: 8px;
}

.timeline-node-panel {
  display: flex;
  align-items: center;

  width: 100%;
  justify-content: center;
}

.timeline-item .timeline-content {
  text-align: center;

  //border: 1px solid #ccc; /* 内容边框 */
  //border-radius: 4px; /* 圆角 */
  padding: 10px; /* 内边距 */
  //background-color: #fff; /* 背景色 */
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.timeline-item .timeline-content-no {
  text-align: center;
  //border: 1px solid #ccc; /* 内容边框 */
  //border-radius: 4px; /* 圆角 */
  padding: 10px; /* 内边距 */
  background-color: #fff; /* 背景色 */
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.timeline-item .timeline-timestamp {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.timeline-item .timeline-text {
  font-size: 14px;
  color: #333;
}

/* 箭头样式 */
.timeline-item.has-next .timeline-arrow::after {
  content: '➔'; /* 使用箭头符号 */
  font-size: 80px;
  color: #ccc;
  position: absolute;
  //right: 80px; /* 调整箭头的位置 */
  top: 50%; /* 让箭头垂直居中 */
  transform: translateY(-50%);
  //width: 100%;
  left: 100%;
}
</style>